<template>
  <div class="centerRight">
    <div class="centerTitle">建设用地复垦项目数据

      <div class="selectTime">
        <n-select v-model:value="valueTime" :options="options" size="tiny" :consistent-menu-width="false" />
      </div>
    </div>
    <div class="setupStyle">
      <variousStages></variousStages>
    </div>

    <div class="centerTitle_T">建设用地复垦后期管护</div>
    <div class="laterStage">
      <laterStage></laterStage>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import variousStages from "./variousStages.vue"
import laterStage from "../centerBody/laterStage.vue"
const valueTime = ref(2021)
const options = [
  {
    label: 2020,
    value: 2020,
  },
  {
    label: 2021,
    value: 2021,
  },
  {
    label: 2022,
    value: 2022,
  },
  {
    label: 2023,
    value: 2023,
  },
  {
    label: 2024,
    value: 2024,
  },
]
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.centerRight {
  width: 429px;
  height: 100%;
  // border: 1px solid rgb(193, 245, 5);
  background-image: url("../../../../assets/lingshui/背景_u15.svg");
  background-size: 100% 100%;
  border-radius: 10px;
  overflow: hidden;

  .centerTitle {
    width: 335px;
    height: 35px;
    // border: 1px solid red;
    margin: 0 auto;
    background-image: url("../../../../assets/lingshui/标题_u21.svg");
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-style: normal;
    color: #FFFFFF;
    font-size: 18px;
    position: relative;

    .selectTime {
      height: 30px;
      width: 70px;
      position: absolute;
      right: 5px;
      // border: 1px solid red;
    }
  }

  .setupStyle {
    // border: 1px solid red;
    height: 330px;
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }

  .centerTitle_T {
    width: 335px;
    height: 35px;
    // border: 1px solid red;
    margin: 0 auto;
    background-image: url("../../../../assets/lingshui/标题_u21.svg");
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-style: normal;
    color: #FFFFFF;
    font-size: 18px;
  }

  .laterStage {
    padding: 10px;
    margin-top: 10px;
    height: 150px;
    // border: 1px solid yellow;
  }
}
</style>